<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../resources/css/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../resources/css/plugins/fancybox/jquery.fancybox.css"/>
    <link rel="stylesheet" href="../../resources/css/style.css"/>
    <script src="../../resources/js/jquery-2.1.1.js"></script>
    <script src="../../resources/js/plugins/fancybox/jqmigrate.js"></script>
    <script src="../../resources/js/plugins/lazyLoad/jquery.lazyload.js"></script>
    <script src="../../resources/js/plugins/layer/layer.js"></script>
    <style>
        body{
            background: #fff;
        }
        .fancybox{
            padding: 0;
            padding-bottom: 8px;
            position: relative;
        }
        .fancybox img{
            padding:0;
            padding-left: 8px;
            width: 100%;
        }
        div.fancybox .check{
            background: url("../../resources/img/ic_tick2.png") no-repeat;
            position: absolute;
            width: 36px;
            height: 32px;
            right: -3px;
            top: 0;
        }
        div.fancybox .checkend{
            background: url("../../resources/img/ic_tick.png") no-repeat;
            position: absolute;
            width: 36px;
            height: 32px;
            right: -3px;
            top: 0;
        }
        .ibox-content{
            margin-top: 60px;
            border: none;
            background: none;
        }
        div.fancybox{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="col-sm-12">
    <a class="ibox float-e-margins">
        <a class="ibox-title navbar-fixed-top">
            <div class="layerForm" href="javascript:;">
                <button class="btn-primary btn pull-left btnAdd">添加</button>
           </div>
            <a href="javascript:;">
                <button class="btn-primary btn pull-right btnFnis">完成</button>
           </a>
        </a>
        <div class="ibox-content">
            <div class="lazyload">
                <div class="col-md-12 col-sm-12  col-xs-12">
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12" width="250"  height="200" alt="image" data-original="../../img/lazyLoad/p_big1.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big2.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big3.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big1.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12" width="250"  height="200" alt="image" data-original="../../img/lazyLoad/p_big1.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big2.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big3.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big1.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12" width="250"  height="200" alt="image" data-original="../../img/lazyLoad/p_big1.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big2.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big3.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big1.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12" width="250"  height="200" alt="image" data-original="../../img/lazyLoad/p_big1.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big2.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big3.jpg"> </div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big1.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12" width="250"  height="200" alt="image" data-original="../../img/lazyLoad/p_big1.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big2.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big3.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big1.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12" width="250"  height="200" alt="image" data-original="../../img/lazyLoad/p_big1.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big2.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big3.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big1.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12" width="250"  height="200" alt="image" data-original="../../img/lazyLoad/p_big1.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big2.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big3.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big1.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12" width="250"  height="200" alt="image" data-original="../../img/lazyLoad/p_big1.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big2.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big3.jpg"></div>
                    <div class="col-md-3 col-sm-12 col-xs-3 fancybox">
                        <img class="lazy col-md-12 col-sm-12  col-xs-12"  width="250"  height="200"   alt="image" data-original="../../img/lazyLoad/p_big1.jpg"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //异步
//    $.ajax({
//        url:"url",
//        type:"post",
//        data:datas,
//        async:false,
//        dataType:"json",
//        success:function(msg){
//            var str = "<a  rel='group' class='fancybox  col-md-3 col-sm-3 col-xs-3' href='../../img/lazyLoad/p_big1.jpg' title='图片4'> <div class="col-md-3 col-sm-12 col-xs-3 fancybox"><img class='lazy col-md-12 col-sm-12  col-xs-12'  width='250'  height='200'   alt='image' data-original='../../img/lazyLoad/p_big1.jpg'> "
//            var el = $(str);
//            //新图追加到列表中
//            $('.lazyload div').append(el);
//            // 限定新的img.lazy元素才懒加载
//            $("img.lazy",el).lazyload({
//                effect:'fadeIn'
//            })
//        }
//    })
    $(function(){
        //懒加载
        $('img.lazy').lazyload({
            effect : "fadeIn"
        });
        //预览
        $('div.fancybox').on('click',function(){
           var th=$(this).children().attr('data-original');
           var thSrc=th.slice(6);
            console.log(thSrc);
            parent.layer.open({
                type: 1,
                title: false,
                closeBtn: 1,
                area:['600px','400px'],
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: "<img width='600px' height='400px' src='"+thSrc+"'>"
            })
        })
        $('.btnAdd').on('click',function(){
            parent.layer.open({
                type: 2,
                skin: 'layui-layer-lan',
                title: false,
                closeBtn: 1,
                area: ['100%', '100%'],
                title:'入驻审核',
                shadeClose: true,
                maxmin:true,
                content:"newModule/inAudit/inAudit.html"
            })
        })
        //勾选图标
        for(var i=0;i<$('div.fancybox').length;i++){
            $($('div.fancybox')[i]).append($('<i class="check"></i>'))
        }
        $('div.fancybox i').on('click',function(e){
            window.event? window.event.cancelBubble = true : e.stopPropagation();
            window.event? window.event.returnValue = false : e.preventDefault();
            if($(this).attr('class')=='check'){
                $(this).attr('class','checkend').show();
            }else{
                $(this).attr('class','check').show();
            }
        })
        //完成
        $('.btnFnis').on('click',function(){
           var abc=$('a.fancybox i').not('.check');
            cs(abc);
        })
        function cs(obj){
            var parTow=obj.parent().parent().attr('id');
            var parthree=obj.parent().parent().parent().attr('id');
            console.log(parTow+'0----------'+parthree);
        }
    })
</script>
</html>